<!DOCTYPE html>
<html>
	<!--备份钱包-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>备份钱包</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			.hea-bg{
				height: 130px;
				background: url(skin/img/icon-back-wall.png) no-repeat center center;
				background-size: 28% 40%;
			}
			#content>h1{
				font-size: 17px;
				text-align: center;
				color: rgba(0,0,0,.6);
			}
			#content>p{
				padding: 20px 0;
				font-size: 15px;
				letter-spacing: 1px;
				line-height: 22px;
				color: rgba(0,0,0,.4);
			}
			.like-stu{
				font-size: 15px;
				text-align: center;
				color: #3573FA;
			}
			.button{
				display: block;
				width: 100%;
				height: 30px;
				margin: 30px 0;
				text-align: center;
				border-radius: 20px;
				border: none;
				outline: none;
				background: #3573FA;
				color: white;
			}
			#mask{
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				background: rgba(0,0,0,.5);
			}
			#mask>.ma-con{
				width: 60%;
				padding:20px;
				background: white;
				border-radius: 10px;
			}
			#mask>.ma-con>h2{
				font-size: 16px;
				padding-bottom: 15px;
				color: rgba(0,0,0,.6);
			}
			#mask>.ma-con>input{
				height: 25px;
				width: 100%;
				background: #EFEDED;
			}
			#mask>.ma-con>.btn-wrap{
				display: flex;
				justify-content: flex-end;
				margin-top:15px;
			}
			#mask>.ma-con>.btn-wrap>button{
				background: transparent;
				font-size: 15px;
				color: #3573FA;
				border: none;
				outline: none;
			}
			#mask>.ma-con>.btn-wrap>button:first-of-type{
				margin-right: 20px;
			}
			.animated{
				animation-duration: .4s;
				animation-fill-mode:both;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<div id="" style='height: 50px;' v-if='offMask1'></div>
			<transition 
				enter-active-class='animated zoomIn'	
				leave-active-class='animated zoomOut'
			>
				<div id="mask" v-if='offMask' @click='offMask=false'>
					<div class='ma-con'>
						<h2>请输入密码:</h2>
						<input type="password" @click.stop='offMask1=true;' v-model='password' />
						<div class='btn-wrap'>
							<button>取消</button>
							<button @click='next'>确定</button>
						</div>
					</div>
				</div>
			</transition>
			<div class='hea-bg'></div>
			<div id="content">
				<h1>最后一步：立即备份你的钱包！</h1>
				<p>备份钱包：导出“助记词”并抄写到安全的地方，千万不要保存到网络上。然后尝试转入、转出小额资产开始使用。</p>
			</div>
			<button class='button' @click="offMask=true;">备份钱包</button>
			<p class='like-stu'>查看备份详细教程</p>
		</div>
		<script src="skin/js/back.js" type="text/javascript" charset="utf-8"></script>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					offMask:false,
					offMask1:false,
					password:'',//输入的密码
				},
				methods:{
					next:function(){  
						plus.webview.open('home.html','home',{},'slide-in-right');
						var web=plus.webview.all();
						for(var i=0;i<web.length-1;i++){
							web[i].close();
						}
					},
				}
			});
		</script>
	</body>
</html>


